<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../node_modules/vue/dist/vue.global.js"></script>
</head>

<body>
    <div id="app">

        <partchild1 :count="count" :arr="nameArr"></partchild1>
    </div>
</body>

</html>
<script>
    // 对数据类型做限制:
    // 使用 props:{ 属性:{default:'默认值',type:属性的数据类型},...}
    // 注意: 对象式的写法 用来规范接收的参数的数据类型,和默认值, 这样写法更加严谨,
    // deault 和  type 选项都是可选项,

    const app = Vue.createApp({
        data() {
            return {
                count: 100,
                nameArr: ['流川枫', '樱木花道', '赤木']
            }
        },
        methods: {

        },
        components: {
            partchild1: {
                template: `<div >
                                <p>我是局部组件--{{count}}</p>
                                <ul>
                                    <li v-for='(item,index) in arr' :key='index'>{{item}}</li>  
                                </ul>
                            </div>`,
                props: {
                    count: {
                        default: 10,
                        type: Number
                    },
                    arr: {
                        default: [10, 20, 30],
                        type: Array
                    }
                },

            }
        }
    }).mount('#app')

</script>